<template>
	<div class="broadcast-details" :style="'height:'+windowH+'px'">
		<view class="hd-wrapper" :class="active === true ? 'on' : ''" :style="viewColor">
			<view v-if="!isDoctor" class="top-wrapper">
				<view class="top-bg hk-step-box">
					<view class="step-item" v-for="(item,index) in steps" :key="index">
						<view class="item-line" v-if="index>0"></view>
						<view class="item-nt-box">
							<view class="item-num" :class="cur_step >= index?'item-num-sel':''">{{index+1}}</view>
							<view class="item-text" :class="cur_step >= index?'item-text-sel':''">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" :scroll-top="scrollTop"
				scroll-with-animation="true" @scrolltoupper="bindScroll">
				<div class="chat" ref="chat">
					<Loading :loaded="status" :loading="loading"></Loading>
					<!-- 聊天列表 -->
					<block v-for="(item,j) in history" :key="j">
						<!-- 医生端 -->
						<block v-if="isDoctor">
							<!-- 居中 19：一条提示信息、17：患者资料、18：开方信息-->
							<view class="item acea-row row-top"
								v-if="item.msn_type == 17 || item.msn_type == 18 || item.msn_type == 19">
								<rp-chat-middle :msgItem="item" :rp_status="rp_status"
									@clickRpItem="clickRpItem" :isDoctor="isDoctor"></rp-chat-middle>
							</view>
							<!-- 左边 -->
							<div class="item acea-row row-top" v-else-if="item.send_type != 1 && item.uid != uid ">
								<div class="pictrue">
									<image :src="item.user.avatar ? item.user.avatar : '/static/images/f.png'"
										mode=""></image>
								</div>
								<div class="text">
									<div class="acea-row">
										<div class="conter acea-row row-middle" v-if="item.msn_type === 1">
											{{ item.msn }}
										</div>
										<div class="conter acea-row row-middle" v-if="item.msn_type === 2">
											<i class="em" :class="item.msn"></i>
										</div>
										<div class="conter acea-row row-middle" v-if="item.msn_type === 3">
											<image :src="item.msn" @click="clickImg(item.msn)" mode="heightFix" />
										</div>
										<!-- pdf -->
										<div class="conter acea-row row-middle" v-if="item.msn_type === 9">
											<chat-pdf :msg-item="item"></chat-pdf>
										</div>
										<!-- 會話申請14：申请 15同意  16拒绝 -->
										<div class="conter acea-row row-middle"
											v-if="item.msn_type === 14 || item.msn_type === 15 ||item.msn_type === 16">
											<chat-apply :msg-item="item" :isDoctor="isDoctor" @chatReply="chatReply"></chat-apply>
										</div>
									</div>
								</div>
							</div>
							<!-- 右边 -->
							<div class="item acea-row row-top row-right" v-else>
									<div class="text textR">
										<!-- <div class="name">{{ item.user.nickname }}</div> -->
										<div class="acea-row ">
							
											<div class="conter acea-row row-middle" v-if="item.msn_type === 1">
												{{ item.msn }}
											</div>
											<div class="conter acea-row row-middle" v-if="item.msn_type === 2">
												<i class="em" :class="item.msn"></i>
											</div>
											<div class="conter acea-row row-middle" v-if="item.msn_type === 3">
												<image :src="item.msn" @click="clickImg(item.msn)" mode="heightFix" />
											</div>
											<!-- pdf -->
											<div class="conter acea-row row-middle" v-if="item.msn_type === 9">
												<chat-pdf :msg-item="item"></chat-pdf>
											</div>
											<!-- 會話申請14：申请 15同意  16拒绝 -->
											<div class="conter acea-row row-middle"
												v-if="item.msn_type === 14 || item.msn_type === 15 ||item.msn_type === 16">
												<chat-apply :msg-item="item" :isDoctor="isDoctor"></chat-apply>
											</div>
							
										</div>
									</div>
									<div class="pictrue">
											<image :src="item.service.avatar ? item.service.avatar : '/static/images/f.png'" />
									</div>
								</div>
							
						</block>
						<block v-else>
							<!-- 居中 19：一条提示信息、17：患者资料、18：开方信息-->
							<view class="item acea-row row-top"
								v-if="item.msn_type == 17 || item.msn_type == 18 || item.msn_type == 19">
								<rp-chat-middle :msgItem="item" :rp_status="rp_status"
									@clickRpItem="clickRpItem" :isDoctor="isDoctor"></rp-chat-middle>
							</view>
							<div class="item acea-row row-top" v-else-if="item.send_type == 1">
									<div class="pictrue">
										<image :src="item.service.avatar ? item.service.avatar : '/static/images/f.png'"
											mode=""></image>
									</div>
									<div class="text">
										<div class="acea-row">
											<div class="conter acea-row row-middle" v-if="item.msn_type === 1">
												{{ item.msn }}
											</div>
											<div class="conter acea-row row-middle" v-if="item.msn_type === 2">
												<i class="em" :class="item.msn"></i>
											</div>
											<div class="conter acea-row row-middle" v-if="item.msn_type === 3">
												<image :src="item.msn" @click="clickImg(item.msn)" mode="heightFix" />
											</div>
											<!-- pdf -->
											<div class="conter acea-row row-middle" v-if="item.msn_type === 9">
												<chat-pdf :msg-item="item"></chat-pdf>
											</div>
											<!-- 會話申請14：申请 15同意  16拒绝 -->
											<div class="conter acea-row row-middle"
												v-if="item.msn_type === 14 || item.msn_type === 15 ||item.msn_type === 16">
												<chat-apply :msg-item="item" :isDoctor="isDoctor"></chat-apply>
											</div>
										</div>
									</div>
								</div>
								<!-- 右邊 -->
								<div class="item acea-row row-top row-right" v-else>
									<div class="text textR">
										<!-- <div class="name">{{ item.user.nickname }}</div> -->
										<div class="acea-row ">
							
											<div class="conter acea-row row-middle" v-if="item.msn_type === 1">
												{{ item.msn }}
											</div>
											<div class="conter acea-row row-middle" v-if="item.msn_type === 2">
												<i class="em" :class="item.msn"></i>
											</div>
											<div class="conter acea-row row-middle" v-if="item.msn_type === 3">
												<image :src="item.msn" @click="clickImg(item.msn)" mode="heightFix" />
											</div>
											<!-- pdf -->
											<div class="conter acea-row row-middle" v-if="item.msn_type === 9">
												<chat-pdf :msg-item="item"></chat-pdf>
											</div>
											<!-- 會話申請14：申请 15同意  16拒绝 -->
											<div class="conter acea-row row-middle"
												v-if="item.msn_type === 14 || item.msn_type === 15 ||item.msn_type === 16">
												<chat-apply :msg-item="item" :isDoctor="isDoctor"></chat-apply>
											</div>
							
										</div>
									</div>
									<div class="pictrue">
										<image :src="item.user.avatar ? item.user.avatar : '/static/images/f.png'" />
									</div>
								</div>
						</block>
						<!-- 左邊 -->
						<div class="item acea-row row-top" v-else-if="item.send_type == 1">
							<div class="pictrue">
								<image :src="item.service.avatar ? item.service.avatar : '/static/images/f.png'"
									mode=""></image>
							</div>
							<div class="text">
								<div class="acea-row">
									<div class="conter acea-row row-middle" v-if="item.msn_type === 1">
										{{ item.msn }}
									</div>
									<div class="conter acea-row row-middle" v-if="item.msn_type === 2">
										<i class="em" :class="item.msn"></i>
									</div>
									<div class="conter acea-row row-middle" v-if="item.msn_type === 3">
										<image :src="item.msn" @click="clickImg(item.msn)" mode="heightFix" />
									</div>
									<!-- pdf -->
									<div class="conter acea-row row-middle" v-if="item.msn_type === 9">
										<chat-pdf :msg-item="item"></chat-pdf>
									</div>
									<!-- 會話申請14：申请 15同意  16拒绝 -->
									<div class="conter acea-row row-middle"
										v-if="item.msn_type === 14 || item.msn_type === 15 ||item.msn_type === 16">
										<chat-apply :msg-item="item"></chat-apply>
									</div>
								</div>
							</div>
						</div>
						<!-- 右邊 -->
						<div class="item acea-row row-top row-right" v-else>
							<div class="text textR">
								<!-- <div class="name">{{ item.user.nickname }}</div> -->
								<div class="acea-row ">

									<div class="conter acea-row row-middle" v-if="item.msn_type === 1">
										{{ item.msn }}
									</div>
									<div class="conter acea-row row-middle" v-if="item.msn_type === 2">
										<i class="em" :class="item.msn"></i>
									</div>
									<div class="conter acea-row row-middle" v-if="item.msn_type === 3">
										<image :src="item.msn" @click="clickImg(item.msn)" mode="heightFix" />
									</div>
									<!-- pdf -->
									<div class="conter acea-row row-middle" v-if="item.msn_type === 9">
										<chat-pdf :msg-item="item"></chat-pdf>
									</div>
									<!-- 會話申請14：申请 15同意  16拒绝 -->
									<div class="conter acea-row row-middle"
										v-if="item.msn_type === 14 || item.msn_type === 15 ||item.msn_type === 16">
										<chat-apply :msg-item="item"></chat-apply>
									</div>

								</div>
							</div>
							<div class="pictrue">
								<image :src="item.user.avatar ? item.user.avatar : '/static/images/f.png'" />
							</div>
						</div>
					</block>
					<block v-if="!isDoctor">
						<view class="space" v-if="showOrderBuy || showApplyBtn" style="height: 20px;"></view>
					</block>
				</div>
				<div :style=" active === true
			      ? 'height:' + footerConH + 'rem;'
			      : 'height:' + footerH + 'rem;'
			  "></div>
			  <div style="height:30px;"></div>
			</scroll-view>
		</view>
		<!-- 医生端显示开方 -->
		<view class="inquiry-end2" :class="active === true ? 'on' : ''" v-if="isDoctor" @click="recommendDrug">
			<image src="@/static/images/chattip1@2x.png" mode="aspectFit"
				style="width:14px;height: 14px;margin-right:3px;"></image> 开方
		</view>
		<div v-if="isDoctor || (!isDoctor && !showApplyBtn && !showOrderBuy && rp_status<2)" class="footerCon" :class="active === true ? 'on' : 'noactive'"
			:style="'transform: translate3d(0,' + percent + '%,0);'" ref="footerCon"> 
			<form>
				<div class="footer acea-row row-between row-bottom" ref="footer">
					<text @click="uploadImg" class="iconfont icon-tupian2"></text>
					<text @click="emoticon" class="iconfont icon-biaoqing2"></text>
					<div class="voice acea-row row-center-wrapper" v-if="voice" @touchstart.prevent="start"
						@touchmove.prevent="move" @touchend.prevent="end">
						{{ speak }}
					</div>
					<view class="input_count">
						<input type="text" placeholder-class='placeholder' placeholder="输入内容" class="input" ref="input"
							v-show="!voice" @input="bindInput" @keyup="keyup" @focus="focus" cursor-spacing="20"
							v-model="textCon">
						<div class="send iconfont icon-fasong" @click="sendTest"></div>
					</view>
				</div>
			</form>
			<div class="banner slider-banner">
				<swiper class="swiper-wrapper" :autoplay="autoplay" :circular="circular" :interval="interval"
					:duration="duration" v-if="emojiGroup.length > 0">
					<block v-for="(emojiList, index) in emojiGroup" :key="index">
						<swiper-item>
							<i class="em" :class="emoji" v-for="emoji in emojiList" :key="emoji"
								@click="addEmoji(emoji)"></i>
							<image src="/static/images/del.png" class="emoji-outer" />
						</swiper-item>
					</block>
				</swiper>
			</div>
		</div>
		<div class="recording" v-if="recording">
			<image src="/static/images/recording.png" />
		</div>
		<!-- 申请 -->
		<view class="chat-apply-box" v-if="!isDoctor && showApplyBtn && rp_status == 0">
			<view class="chat-apply">
				<view v-if="apply_status == 0" class="btn btn-disable">已申请对话，等待医生响应</view>
				<view v-if="apply_status == 2" class="btn btn-disable">医生已拒绝对话</view>
				<view v-if="apply_status == 3" class="btn" @click="clickApplyBtn">申请对话</view>
			</view>
			<view class="hk-safe"></view>
		</view>
		<!-- 结算 -->
		<view class="order-buy-box" v-if="!isDoctor && showOrderBuy">
			<view class="order-buy" @click="clickOrderBuy">
				<view class="btn">结算</view>
			</view>
			<view class="hk-safe"></view>
		</view>
		<!-- 处方详情 -->
		<rp-info :rpUrls="rpUrls" :rpShow="showRpInfo" @close="closeRpInfo"></rp-info>
		<!-- 支付 -->
		<payment :payMode='payMode' :pay_close="pay_close" :from="1" @onChangeFun='onChangeFun' :order_id="order_id"
			:totalPrice='totalPrice'></payment>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- 开方 -->
		<rp-open v-if="showRP" ref="rpOpenRef" :orderInfo="rpOrderInfo" :order_id="order_id" @refreshList="refreshList"></rp-open>

	</div>
</template>
<script>
	import emojiList from "@/utils/emoji";
	import Socket from "@/libs/chat";
	// #ifdef H5
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	// #endif
	import {
		getPrescribeHistory,
		checkprescribe,
		getUserInfo,
		getPrescribeLog,
		prescribeOrderDetail
	} from "@/api/user";

	import easyUpload from '@/components/easy-upload/easy-upload.vue'
	import Loading from "@/components/Loading";
	import rpChatMiddle from "./component/rp_chat_middle.vue"
	import chatPdf from "./component/chat_pdf.vue"
	import chatApply from "./component/chat_apply.vue"
	import payment from '@/components/payment';
	import rpInfo from "./component/rp_info.vue"
	import rpOpen from './component/rp_open.vue'
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	const chunk = function(arr, num) {
		num = num * 1 || 1;
		var ret = [];
		arr.forEach(function(item, i) {
			if (i % num === 0) {
				ret.push([]);
			}
			ret[ret.length - 1].push(item);
		});
		return ret;
	};

	const PATH = 'pages/chat/customer_list/chat'
	const app = getApp();
	export default {
		components: {
			Loading,
			easyUpload,
			authorize,
			rpChatMiddle,
			chatPdf,
			chatApply,
			payment,
			rpInfo,
			rpOpen
		},
		computed: {
			...mapGetters(['isLogin', 'viewColor', 'order_rp_type']),
			...configMap(['hide_mer_status', 'community_status', 'alipay_open', 'yue_pay_status'
				
			]),
		},
		watch: {
			alipay_open(n) {
				this.payMode[1].payStatus = n
			},
			yue_pay_status(n) {
				this.payMode[2].payStatus = n
			},
			
			// pay_weixin_open(n) {
			// 	this.payMode[0].payStatus = n
			// },
			rp_status: {
				immediate: true,
				handler(n, o) {
					console.log("rk===>[xxxx]", n);
					//0-默认 1-已开方，去结算 2-已支付
					if (n == 1) {
						this.showOrderBuy = true;
						this.cur_step = 2;
					} else if (n == 2) {
						this.showOrderBuy = false;
						this.cur_step = 3;
					} else {
						this.showOrderBuy = false;
					}
				}
			},
			apply_status: {
				immediate: true,
				handler(n, o) {
					// 0申请中  1通过  2 拒绝 3未發起過
					console.log("rk===>[apppppp]", n);
					if (n == 1) {
						this.showApplyBtn = false;
					} else {
						this.showApplyBtn = true;
					}
				}
			},
		},
		data: function() {
			return {
				uid:0,
				cur_step: 1,
				steps: [{
					id: 0,
					title: '填写信息'
				}, {
					id: 1,
					title: '医生开方'
				}, {
					id: 2,
					title: '下单支付'
				}],
				url: `${HTTP_REQUEST_URL}/api/upload/image`,
				headers: {
					"Authori-zation": "Bearer " + this.$store.state.app.token
				},
				emojiGroup: chunk(emojiList, 20),
				active: false,
				voice: false,
				speak: "按住 说话",
				recording: false,
				percent: 0,
				footerConH: 0,
				footerH: 1.08,
				socket: null,
				page: 1,
				limit: 30,
				loading: false,
				loaded: false,
				history: [],
				sendColor: false,
				sendtxt: "",
				autoplay: false,
				circular: true,
				interval: 3000,
				duration: 500,
				windowH: 0,
				isBQ: false,
				scrollTop: 0, //滾動距離
				textCon: '', //文字
				mer_id: 0, //商鋪id
				order_id: 0, //订单id
				status: false, //砍價列表是否獲取完成 false 未完成 true 完成
				isBack: false,
				isAuto: false, //沒有授權的不會自動授權
				isShowAuth: false, //是否隱藏授權
				showOrderBuy: false,
				showRpInfo: false,
				rpUrls: [],
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'wechat',
						title: '微信快捷支付',
						payStatus: 1
					},
					{
						name: "支付宝支付",
						icon: "icon-zhifubao",
						value: 'alipay',
						title: '支付宝支付',
						payStatus: this.$store.getters.globalData.alipay_open
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					},
				],
				pay_close: false,
				totalPrice: '0',
				rp_status: 0, //0-默认 1-已开方，去结算 2-已支付
				showApplyBtn: false,
				apply_status: 3, // 0申请中  1通过  2 拒绝 3未發起過
				isDoctor: false, //是否是医生
				toUid: 0,
				showRP:false,//显示开方弹窗
				rpOrderInfo:null//已经开方
			};
		},

		beforeDestroy() {
			uni.$off(["socket_open", "reply", "chat","send_prescribe","service_chat", "send_chat", "socket_error", "socket_close"])
		},
		onUnload() {
			this.wsEnd();
		},
		
		onLoad(option) {
			let self = this
			if (option.isDoctor && option.isDoctor == 1) {
				this.isDoctor = true
				this.toUid = option.toUid
			}
			this.mer_id = option.mer_id || 0
			this.order_id = option.order_id || 0
			//console.log('orderID=' + this.order_id)
			uni.getSystemInfo({
				success: function(res) {
					self.windowH = res.windowHeight
				}
			})
			// #ifdef H5
			this.$nextTick(function() {
				var clipboard = new ClipboardJS('.copy-data');
				clipboard.on('success', function(e) {
					self.$util.Tips({
						title: '复制成功'
					})
				});
				clipboard.on('error', function(e) {
					self.$util.Tips({
						title: '复制失败'
					})
				});
			});
			// #endif

		},
		onReady() {},
		mounted: function() {
			let that = this
			that.height();
			//console.log('isDoctor:' ,this.isDoctor)
			if (that.isLogin) {
				if (!that.isDoctor) {
					that.checkprescribe();
				}
				that.getHistory();
				that.getUserInfo();
			} else {
				that.isAuto = true;
				that.isShowAuth = true
			}
			uni.$on("socket_open", () => {
				that.socket.send({
					data: {
						mer_id: that.mer_id,
						order_id: that.order_id,
					},
					type: "chat_start"
				});
				// if(that.isDoctor){
				// 	that.socket.send({
				// 		data: {
				// 			uid: that.userId,
				// 			mer_id: that.mer_id,
				// 		},
				// 		type: "service_chat_start"
				// 	});
				// }else{
				// 	that.socket.send({
				// 		data: {
				// 			mer_id: that.mer_id,
				// 			order_id: that.order_id,
				// 		},
				// 		type: "chat_start"
				// 	});
				// }
				// 创建订单，仅发送一次
				// let send_first_msg = uni.getStorageSync("send_first_msg");
				// if (send_first_msg && send_first_msg == 1) {
				// 	uni.setStorageSync("send_first_msg", 0);
				// 	// console.log("rk===>[order_id,]",that.order_id,that.mer_id);
				// 	//msn_type:13,用来通知客服端列表刷新
				// 	that.sendMsg('13', '13');
				// }

			});
			uni.$on(["reply", "chat", "send_chat","send_prescribe","service_chat"], data => {
				 console.log("rk===>[收到了消息]" + JSON.stringify(data));
				if (data.msn_type == 18 || data.msn_type == 15 || data.msn_type == 16) {
					//that.rp_status = 1;
					if (!that.isDoctor) {
						that.checkprescribe();
					}
				}
				if(data.conversation_id == 0){
					that.order_id = data.order_id
					that.history.push(data);
					that.$forceUpdate();
					//console.log(that.history)
					that.height();
				}
				
			});

			uni.$on("socket_error", () => {
				if (!that.isBack) {
					
					that.wsStart()
					// uni.showModal({
					// 	title: '提示',
					// 	content: '连接失败，是否重新连接',
					// 	success: function(res) {
					// 		if (res.confirm) {
					// 			self.wsStart()
					// 		} else if (res.cancel) {
					// 			uni.navigateBack();
					// 		}
					// 	}
					// });
				}
			});
			uni.$on("err_tip", data => {
				if (!this.isBack) {
					uni.showModal({
						title: '提示',
						content: data,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			});
			uni.$on("socket_close", () => {
				//console.log(that.isBack);
				if (!this.isBack) {
					let curRoute = this.$mp.page.route;
					let self = this
					uni.showModal({
						title: '提示',
						content: '连接断开，是否重新连接',
						success: function(res) {
							if (res.confirm) {
								self.wsStart()
							} else if (res.cancel) {
								uni.navigateBack();
							}
						}
					});
				}
			})
			//  改为获取到记录在连接socekt,要从记录获取mer_id
			// this.wsStart();
		},
		
		methods: {
			// 会话申请操作
			chatReply(msn_type,msnItem){
			    //15同意  16拒绝
			    let msn = "同意会话申请";
			    if(msn_type == 16){
			        msn = "拒绝会话申请";
			    }
			    this.sendMsg(msn, msn_type);
			    // console.log("rk===>[xxvvv]" + JSON.stringify(msnItem));
			    this.history.forEach(forItem=>{
			        if(forItem.service_log_id == msnItem.service_log_id){
			            forItem.apply_status = msnItem.apply_status;
			        }
			    })
			},
			recommendDrug(){
				let that = this
				prescribeOrderDetail(this.order_id).then(res => {
					console.log(res)
					let resData = res.data;
					that.rpOrderInfo = resData;
					that.showRP = true
				}).catch(err => {
					that.$util.Tips({
						title:err
					});
					that.showRP = false
				});
				
			},
			// 開方成功
			refreshList(pdfurl) {
				// this.clickTab(0);
				//console.log('发送18')
				this.showRP = false
				this.sendMsg(pdfurl, 18);
				// this.page = 1;
				// this.loaded = false
				// this.loading = false
				// this.getHistory();

				// 医生发送提示语
				let tips = '如服用药物后，出现任何不适或紧急情况，请立即停止服用，并务必带同你的个人病历及有关数据，尽快到附近的诊所及医院求医。';
				setTimeout(() => {
					this.sendMsg(tips, 1);
				}, 400);
			},

			/**
			 * 登錄授權回調
			 *
			 */
			onLoadFun: function() {
				this.isShowAuth = false;
				this.getHistory();
			},
			// 授權關閉
			authColse: function(e) {
				this.isShowAuth = e;
			},

			// ws連接
			wsStart() {
				this.socket = new Socket();
				this.height();
			},
			// ws關閉
			wsEnd() {
				let that = this;
				that.socket.send({
					data: {
						mer_id: that.mer_id,
						order_id: that.order_id,
					},
					type: "chat_end"
				});
				that.isBack = true
				that.socket && that.socket.onClose();
			},

			uploadImg() {
				let self = this
				self.$util.uploadImageOne('upload/image', function(res) {
					if (res.status == 200) {
						self.sendMsg(res.data.path, 3)
					}
				});
			},

			scroll() {
				if (window.scrollY < 300 && !this.loaded && !this.loading)
					this.getHistory();
			},
			imageuploaded(res) {
				console.log(res)
				if (res.status !== 200)
					return this.$util.Tips({
						title: res.msg || "上传图片失败"
					});
				this.sendMsg(res.data.url, 3);
			},
			// 状态
			checkprescribe() {
				let that = this
				checkprescribe(this.order_id).then(res => {
					console.log('status',res)
					that.apply_status = res.data.apply_status;
					that.rp_status = res.data.status;
					that.totalPrice = res.data.pay_price + '';

				}).catch(err => {});
			},
			// 用户聊天記錄
			getHistory() {
				if (this.loading || this.loaded) {
					return;
				}
				this.loading = true;
				if (this.isDoctor) {
					let that = this
					let param = {
						'page': this.page,
						'limit': this.limit
					}
					getPrescribeLog(this.toUid, param).then(res => {
						//console.log(res)
						that.wsStart();
						if (that.page == 1) {
							that.history = res.data.list;
						} else {
							that.history = res.data.list.concat(that.history);
						}
						if (that.page === 1) {
							this.$nextTick(function() {
								// window.scrollTo(0, document.documentElement.scrollHeight + 999);
								this.height();
							});
						}
						if (that.history.length > 0) {
							that.order_id = that.history[that.history.length - 1].order_id;
							// console.log("rk===>[获取到了]" ,this.mer_id);
						}
						/**
						 * 从最后一条消息获取医生所属商户
						 */
						if (!that.mer_id && that.history.length > 0) {
							that.mer_id = that.history[that.history.length - 1].mer_id;
							// console.log("rk===>[获取到了]" ,this.mer_id);
						}
						that.page++;
						that.loading = false;
						that.loaded = res.data.list.length < that.limit;
					})
				} else {
					let postDic = {
						page: this.page,
						limit: this.limit,
						order_id: this.order_id,
					}
					getPrescribeHistory(postDic).then(({
						data
					}) => {
						console.log(data)
						this.history = data.list.concat(this.history);
						/**
						 * 从最后一条消息获取医生所属商户
						 */
						if (!this.mer_id && this.history.length > 0) {
							this.mer_id = this.history[this.history.length - 1].mer_id;
							// console.log("rk===>[获取到了]" ,this.mer_id);
						}

						this.wsStart();

						if (this.page === 1) {
							this.$nextTick(function() {
								// window.scrollTo(0, document.documentElement.scrollHeight + 999);
								this.height();
							});
						}
						this.page++;
						this.loading = false;
						this.loaded = data.length < this.limit;
					}).catch(err => {
						this.$util.Tips({
							title: err.msg || "加载失败"
						});
					});
				}

			},

			focus: function() {
				this.active = false;
			},
			keyup: function() {
				// console.log(this.$refs.input.innerHTML.length);
				if (this.$refs.input.value.length > 0) {
					this.sendColor = true;
				} else {
					this.sendColor = false;
				}
			},
			addEmoji(name) {
				this.sendMsg(name, 2);
			},
			clickImg(url) {
				wx.previewImage({
					urls: [url],
					current: 0,
					success: function(res) {},
					fail: function(res) {},
					complate: function(res) {}
				})
			},
			sendMsg(msn, type) {
				let self = this;
				this.height();
				//console.log('curOrderID=',self.order_id)
				if(self.order_id>0){
					this.socket.send({
						data: {
							msn,
							msn_type: type,
							uid: self.uid,
							order_id: self.order_id,
							mer_id: self.mer_id
						},
						type: "send_prescribe",
					})
				}else{
					this.socket.send({
						data: {
							msn,
							msn_type: type,
							mer_id: self.mer_id,
							order_id: self.order_id,
						},
						type: "send_chat",
					})
				}
				// if(self.isDoctor){
				// 	this.socket.send({
				// 		data: {
				// 			msn,
				// 			msn_type: type,
				// 			uid: self.uid,
				// 			order_id: self.order_id,
				// 			mer_id: self.mer_id
				// 		},
				// 		type: "service_chat",
				// 	})
				// }else{
					
				// }	
			},
			sendTest() {
				this.sendMsg(this.textCon, 1);
				this.textCon = ''
				this.height();
			},

			bindInput: function(e) {
				if (e.detail.value) {
					this.sendColor = true
				} else {
					this.sendColor = false
				}
				this.height();
			},
			start() {
				var that = this;
				this.longClick = 0;
				this.timeOutEvent = setTimeout(function() {
					that.longClick = 1;
				}, 500);
				that.speak = "松开 结束";
				that.recording = true;
			},
			move() {
				clearTimeout(this.timeOutEvent);
				this.timeOutEvent = 0;
			},
			end() {
				clearTimeout(this.timeOutEvent);
				if (this.timeOutEvent !== 0 && this.longClick === 0) {
					//點擊
					//此處為點擊事件----在此處添加跳轉詳情頁
				}
				this.speak = "按住 说话";
				this.recording = false;
				return false;
			},

			emoticon: function() {
				this.voice = false;
				console.log(this.active)
				if (this.active === true) {
					this.active = false;
					this.isBQ = false
				} else {
					this.active = true;
					this.isBQ = true
				}
				this.height();
			},
			height() {
				let self = this
				var scrollTop = 0
				let info = uni.createSelectorQuery().select(".chat");
				setTimeout(res => {
					(!this.isBack) && info.boundingClientRect(function(data) { //data - 各種參數
						scrollTop = data.height
						if (self.active) {
							self.scrollTop = parseInt(scrollTop) + 500
						} else {
							self.scrollTop = parseInt(scrollTop) + 100
						}
					}).exec()
				}, 1000)
			},
			// 滾動到頭部
			bindScroll() {
				console.log('滾動到頭部')
				this.getHistory();
			},
			//#ifndef H5
			copyText: function(text) {
				uni.setClipboardData({
					data: text
				});
			},
			// #endif
			clickRpItem(rpUrls) {
				this.rpUrls = rpUrls;
				this.showRpInfo = true;
			},
			closeRpInfo() {
				this.showRpInfo = false;
			},
			// 订单结算
			clickOrderBuy() {
				this.pay_close = true;
			},
			/**
			 * 獲取用户信息
			 *
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.uid = res.data.uid
					that.payMode[2].number = res.data.now_money;
				});
			},
			/**
			 * 事件回調
			 *
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},
			/**
			 * 關閉支付組件
			 *
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 支付成功回調
			 *
			 */
			pay_complete: function() {
				//this.checkprescribe()
				this.pay_close = false;
				uni.navigateBack({
					delta:2
				})
			},
			/**
			 * 支付失敗回調
			 *
			 */
			pay_fail: function() {
				this.pay_close = false;
			},
			/**
			 * 申请对话
			 */
			clickApplyBtn() {
				
				if (this.apply_status == 0) {
					return this.$util.Tips({
						title: "对话申请中，请等待医生的响应"
					})
				}
				if (this.apply_status == 2) {
					return this.$util.Tips({
						title: "对话申请被拒绝"
					})
				}
				//14 申请   15 同意  16拒绝
				let msg = '发起会话申请';
				this.sendMsg(msg, 14)
				this.apply_status = 0;
			},
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}
	@import url("@/plugin/emoji-awesome/css/google.min.css");

	.swiper-wrapper{
		width: 100%;
		height: 200px;
	
	}
	.inquiry-end2 {
		position: absolute;
		bottom: 110rpx; // 闪出 .footerCon 的高度
		bottom: calc(110rpx + constant(safe-area-inset-bottom));
		bottom: calc(110rpx + env(safe-area-inset-bottom));
		// z-index: 3;//99
		//background-color: #36CF89;
		background-color: #ff1717;
		margin-left: 30rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border-radius: 8rpx;
		color: #fff;
	
		.yyfont {
			margin-right: 6rpx;
		}
	}
	
	.broadcast-details .inquiry-end2.on {
		bottom: 420rpx;
		transform: translate3d(0, 0, 0) !important;
	}
	.tool-hidder{
		bottom: 210rpx;
	}
	.noPad {
		padding: 0 !important;
		margin-bottom: 0 !important;
		height: auto !important;
	}

	.broadcast-details_num {
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		color: #666666;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		background: #fff;
		border-bottom: 1px solid #F5F5F5;
		padding: 0 24rpx;
		border-radius: 10rpx 10rpx 0 0;

		.line1 {
			max-width: 203rpx;
		}
	}

	.footer_count {
		margin-top: 20rpx;
		width: 710rpx;
		position: fixed;
		bottom: 120rpx;
		left: 20rpx;

		.broadcast-details_box,
		.broadcast_box {
			margin-bottom: 0;
			position: relative;
		}

		.icon-guanbi {
			font-size: 20rpx;
			color: #C4C4C4;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}

	.broadcast-details_order {
		// padding: 15rpx;
	}

	.copy {
		color: var(--view-theme);
		margin-left: 24rpx;
		font-size: 22rpx;
		opacity: .5;
	}

	.broadcast-details_box {
		padding: 20rpx;
		display: flex;
		background: #fff;
		border-radius: 0 0 10px 10rpx;
		margin-bottom: 24rpx;
	}

	.broadcast_details_model {
		width: 100%;
		height: 43rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 0px 0px 8px 8px;
		position: absolute;
		z-index: 2;
		bottom: 0;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		line-height: 43rpx;
	}

	.broadcast_details_img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
	}

	.broadcast_details_img uni-image {
		width: 160rpx;
		height: 160rpx;
	}

	.broadcast_details_img_no {
		width: 456rpx;
		height: 456rpx;
		border-radius: 10px 10px 0px 0px;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.broadcast_details_picBox_no {
		width: 100%;
	}

	.broadcast_details_img_no uni-image,
	.broadcast_details_img_no img {
		width: 100%;
		height: 100%;
	}

	.broadcast_details_tit {
		font-size: 30rpx;
		color: #282828;
		height: 40rpx;
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: left !important;

	}

	.product_price {
		margin-top: 66rpx;
	}

	.broadcast_details_tit_no {
		font-size: 28rpx;
		color: #333333;
		font-weight: 800;
		text-align: left;
		margin-top: 5rpx;
		max-width: 420rpx;
	}

	.broadcast_details_picBox {
		width: 75%;
		margin-left: 24rpx;
	}

	.broadcast_details_pic {
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: left;
	}

	.broadcast_details_pic_num {
		text-decoration: line-through;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.5);
		margin-left: 0.1rem;
	}

	.broadcast_details_btn {
		width: 130rpx;
		height: 50rpx;
		background: var(--view-theme);
		opacity: 1;
		border-radius: 125rpx;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 50rpx;
		margin-top: 16px;
		float: right;

		&.product_btn {
			margin-top: 0;
			float: none;
		}

		&.refund_btn {
			width: 150rpx;
		}
	}

	.p-color {
		color: var(--view-priceColor);
	}

	.broadcast-details .chat {
		padding: 1rpx 23rpx 0 23rpx;
		margin-bottom: 3rpx;
	}

	.broadcast-details .chat .item {
		margin-top: 37rpx;
	}

	.broadcast-details .chat .item .pictrue {
		width: 80rpx;
		height: 80rpx;
		margin-top: 10rpx;
	}

	.broadcast-details .chat .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.broadcast-details .chat .item .text {
		margin-left: 20rpx;
	}

	.broadcast-details .chat .item .text.textR {
		text-align: right;
		margin: 0 20rpx 0 0;
	}

	.broadcast-details .chat .item .text .name {
		font-size: 24rpx;
		color: #999;
	}

	.broadcast-details .chat .item .text .name .return {
		color: #509efb;
		margin-left: 17rpx;
	}

	.broadcast-details .chat .item .text.textR .name .return {
		margin: 0 0.17rem 0 0;
	}

	.broadcast-details .chat .item .text .conter {
		background-color: #fff;
		border-radius: 8rpx;
		padding: 16rpx 20rpx;
		font-size: 30rpx;
		color: #333;
		position: relative;
		max-width: 600rpx;
		margin-top: 2rpx;
		word-break: break-all;
		text-align: left;

		.em {
			margin: 0;
		}
	}

	.broadcast-details .chat .item .text .spot {
		width: 15rpx;
		height: 15rpx;
		background-color: #c00000;
		border-radius: 50%;
		margin-left: 20rpx;
	}

	.broadcast-details .chat .item .text .conter:before {
		position: absolute;
		content: "";
		width: 0;
		height: 0;
		border-bottom: 9rpx solid transparent;
		border-right: 14rpx solid #fff;
		border-top: 9rpx solid transparent;
		left: -14rpx;
		top: 25rpx;
	}

	.broadcast-details .chat .item .text.textR .conter:before {
		left: unset;
		right: -14rpx;
		transform: rotateY(180deg);
	}

	.broadcast-details .chat .item .text .conter img {
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
		display: block;
	}

	.broadcast-details .chat .item .text .conter .signal {
		width: 48rpx;
		height: 48rpx;
	}

	.broadcast-details .chat .item .text .conter .signal.signalR {
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}

	.broadcast-details .order-buy-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;

		.order-buy {
			display: flex;
			justify-content: center;
			padding: 20rpx 0;

			.btn {
				background-color: #D20A02;
				border-radius: 100px;
				padding: 20rpx 0;
				color: #fff;
				width: 80%;
				display: flex;
				justify-content: center;
			}
		}
	}

	.broadcast-details .chat-apply-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;

		.chat-apply {
			display: flex;
			justify-content: center;
			padding: 20rpx 0;

			.btn {
				background-color: #D20A02;
				border-radius: 100px;
				padding: 20rpx 0;
				color: #fff;
				width: 80%;
				display: flex;
				justify-content: center;
			}

			.btn-disable {
				opacity: 0.5;
			}
		}
	}
	
	.broadcast-details .footerCon {
		height: 100rpx;
		width: 100%;
		transition: all 0.005s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		background-color: #fff;
	}

	.broadcast-details .footerCon.on {
		position: relative;
		top: -300rpx;
		transform: translate3d(0, 0, 0) !important;
	}
	.broadcast-details .footerCon.noactive {
		height: calc(85rpx + constant(safe-area-inset-bottom));
		height: calc(85rpx + env(safe-area-inset-bottom));
	}
	.broadcast-details .footerCon .banner .swiper-slide {
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		background-color: #FFF;
		padding-bottom: 50rpx;
		border-top: 1px solid #f5f5f5;
	}

	.broadcast-details .footerCon .banner .swiper-slide .emoji-outer,
	.swiper-slide .em {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 0 0 50rpx;
	}

	.broadcast-details .footerCon .banner .swiper-container-horizontal>.swiper-pagination-bullets {
		bottom: 10rpx;
	}

	.broadcast-details .footerCon .slider-banner .swiper-pagination-bullet-active {
		background-color: #999;
	}

	.broadcast-details .recording {
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: 40%;
		left: 50%;
		margin-left: -150rpx;
	}

	.broadcast-details .recording img {
		width: 100%;
		height: 100%;
	}

	.broadcast-details .footer {
		width: 100%;
		background-color: #fff;
		padding: 17rpx 26rpx;
	}

	.footer_box {
		margin-top: 260rpx;
	}

	.broadcast-details .footer image {
		width: 61rpx;
		height: 60rpx;
		display: block;
	}

	.broadcast-details .footer .icon-biaoqing2,
	.broadcast-details .footer .icon-tupian2 {
		font-size: 60rpx;
		display: block;
	}

	.broadcast-details .footer .voice {
		width: 440rpx;
		border-radius: 10rpx;
		background-color: #e5e5e5;
		/* padding: 17rpx 30rpx; */
		height: 60rpx;
		padding-left: 20rpx;
	}

	.broadcast-details .footer .input_count {
		margin-left: 20rpx;
		width: 544rpx;
		border-radius: 38rpx;
		background-color: #F6F6F6;
		padding: 0 80rpx 0 30rpx;
		height: 76rpx;
		position: relative;
	}

	.broadcast-details .footer .placeholder {
		color: #999999;
		font-size: 26rpx;
	}

	.broadcast-details .footer .input {
		max-height: 150rpx;
		overflow-y: auto;
		overflow-x: hidden;
		color: #999999;
		height: 76rpx;
		font-size: 26rpx;
	}

	.broadcast-details .footer .send {
		font-size: 48rpx;
		// color: #cccccc;
		color: #D20A02;
		position: absolute;
		right: 15rpx;
		top: 15rpx;
	}

	.em {
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 0 0 50rpx;
	}

	.emoji-outer {
		position: absolute;
		right: 70rpx;
		/* bottom: 12rpx; */
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 0 0 50rpx;
	}

	.broadcast-details {
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow: hidden;

		.hd-wrapper {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			&.on {
				padding-bottom: 300rpx;
			}
		}
	}

	.top-wrapper {
		background-color: #f5f5f5;
		padding: 20rpx 30rpx 0;

		.top-bg {
			background-color: #fff;

			.item-num-sel {
				background-color: #D20A02 !important;
			}
		}
	}
</style>